<style lang="scss" scoped>
@import '@/assets/css/index';
  .pass{
    .wrapper{
      padding: 2rem;
      display: flex;
      flex-wrap:wrap;
      justify-content: space-around;
      align-items: center;
      .box{
        width: 6rem;
        height: 6rem;
        line-height: 6rem;
        text-align: center;
        background-color: #ff00ff;
        margin: 1.4rem;
        color: white;
      }
      .passallpic{
        width: 100%;
        margin: 0 auto;
        margin-top: 20px;
      }
      .valueLine{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-top: 26px;
        width: 100%;
        .icon{
          flex: 0 0 40px;
          img{
            width: 100%;
          }
        }
        .input,.inputSelect{
          flex: 1;
          margin-left: 10px;
          height: 38px;
          line-height: 38px;
          border: 1px solid $mainColor;
          padding-left: 7px;
          font-size: 14px;
          box-sizing: border-box;
          &::-webkit-input-placeholder{
              color:$mainColor;
          }
          &::-moz-placeholder{   /* Mozilla Firefox 19+ */
              color:$mainColor;
          }
          &:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
              color:$mainColor;
          }
          &:-ms-input-placeholder{  /* Internet Explorer 10-11 */ 
              color:$mainColor;
          }
        }
        
        .inputSelect{
          padding-right:20px;
          background:url("../../../assets/img/arrow_d.png") no-repeat scroll transparent;
          background-position-x: 96%;
          background-position-y: center;
          background-size: 15px 10px;
        }
      }
    }
    .model{
      position: relative;
      background-color: white;
      width: 80%;
      height: auto;
      border: 3px solid #39A9FA;
      border-radius: 10px;
      padding: 13px 10px;
    }
    .popBox{
      width: 100%;
      height: 100%;
      background-color: $mainColor;
      color:white;
      padding: 12px;
      box-sizing: border-box;
      .title{
        font-size: 16px;
        font-weight: bold;
        padding: 10px 0;
      }
      .item{
        display: flex;
        flex-direction: column;
        border-bottom: 1px dotted white;
        overflow: hidden;
        padding: 8px 0;
        box-sizing: border-box;
        .text{
          font-size: 13px;
          font-weight: bold;
        }
        .address{
          font-size: 11px;
          margin-top: 4px;
          line-height: 1.3em;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp:2; /* 设置行数 */
          -webkit-box-orient:vertical;
        }
      }
    }
  }
  .tip{
        color: $mainColor;
        text-align: center;
        margin-top: 16px;
      }
      .imgBox{
        width:268px;
        height:42px;
        margin-top: 16px;
        .go{
          // left: 50%;
          width:100%;
          height:42px;
        }
      }
</style>
<template>
  <div class="pass">
    <div class="wrapper">
      <img class="passallpic" src="../../../assets/img/info/passAllText.png" alt="">
      <div class="valueLine">
        <span class="icon"><img src="../../../assets/img/info/name.png" alt=""></span>
        <input class="input" maxlength="11" type="text" placeholder="请输入您的姓名" v-model="form.name">
      </div>
      <div class="valueLine">
        <span class="icon"><img src="../../../assets/img/info/phone.png" alt=""></span>
        <input class="input" type="text" maxlength="11" placeholder="请输入您的电话" v-model="form.mobile">
      </div>
      <div class="valueLine">
        <span class="icon"><img src="../../../assets/img/info/address.png" alt=""></span>
        <input class="inputSelect" v-model="list[form.address-1].text" type="text" placeholder="请选择领奖地址" @click="showPop=true">
      </div>
      <div class="tip">（此信息只用于领奖使用，请认真填写）</div>
      <div class="imgBox">
        <img class="go" src="../../../assets/img/submit.png" @click="submit">
      </div>
    </div>
    <van-popup v-model="showPop" position="bottom">
      <div class="popBox">
        <div class="title">请选择领奖地址</div>
        <div class="item" v-for="item in list" :key="item.value" @click="clickItem(item)">
          <div class="text">{{item.text}}·营销中心</div>
          <div class="address">{{item.address}}</div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import utils from '@/assets/js/utils.js'
import {Toast,Dialog} from 'vant'
import {myMixins} from "@/assets/js/mixins.js"
export default {
  name: 'pass',
  mixins: [myMixins],
  components: {
    [Dialog.name]:Dialog,
    [Toast.name]:Toast,
  },
  data(){
    return {
      value: 0,
      list:[],
      showPop: false,
      form:{
        name:'',
        mobile:'',
        address: 1
      }
    }
  },
  created () {
    this.list = this.$store.state.addressList
    document.title="填写领奖信息"
    this.getPassInfo()
    this.shareHomePage()
  },
  methods: {
    submit(){
      console.log('submit',this.form)
      let params = this.form
      console.log('utils.hasNull(params)',utils.hasNull(params))
      if(utils.hasNull(params)){
        Dialog.alert({
            title: '系统提示',
            message: '请填写完整信息'
          }).then(() => {
            // on close
          });
        return;
      }
      this.$request.saveInfo(params).then(res=>{
        console.log("res",res)
        if(res.errno == 0){
          Dialog.alert({
            title: '系统提示',
            message: '提交成功'
          }).then(() => {
            localStorage.setItem('hexiao_url',res.data)
            this.$router.push('/award')
          });
        }else{
          if(res.message=='当前用户已拥有待领取的奖品'){
            this.$router.push('/game')
          }else{
            localStorage.setItem('hexiao_url',res.data)
            this.$router.push('/awardno')
          }
          // Dialog.alert({
          //   title: '系统提示',
          //   message: res.message
          // }).then(() => {
          //   // on close
            
          // });
        }
      })
    },
    RandomNum(Min, Max) {
      var Range = Max - Min;
      var Rand = Math.random();
      var num = Min + Math.floor(Rand * Range); //舍去
      return num;
    },
    clickItem(item){
      this.showPop = false
      this.form.address = item.value
    }
  }
}
</script>
